<css href="/Public/design/iconfont/iconfont.css" />
<style>
    .fl {
        float: left;
    }
    
    .fr {
        float: right;
    }
    
    #editor {
        width: 100%;
        min-height: 300px;
    }
    
    .img-wrap {
        background: #f8f8f8;
        text-align: center;
        width: 240px;
    }
    
    .img-wrap {
        width: 80px;
        height: 80px;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        cursor: pointer;
    }
    
    .img-wrap>span,
    .video-fengmian {
        font-size: 60px;
        line-height: 207px;
        color: #eee;
    }
    
    .img-wrap img {
        width: 100%;
        cursor: pointer;
    }
    
    #filelist li {
        border: 1px dashed #ccc;
        padding: 5px 10px 5px 10px;
        font-size: 14px;
        width: 600px;
        margin-bottom: 10px;
    }
    
    #filelist li .fl a {
        line-height: 38px;
        padding: 0 50px 0 10px;
        color: #009688;
        height: 38px;
        display: inline-block;
    }
    
    #filelist li .fl a:hover {
        background: #f8f8f8;
    }
    
    ul.imglist li {
        float: left;
        margin-right: 20px;
    }
    
    ul.imglist li .img-btn {
        margin-top: 5px;
    }
    
    ul.imglist li .img-btn .layui-input-block {
        margin-left: 0;
        margin-bottom: 5px;
    }
    
    ul.imglist li .img-btn .layui-inline {
        margin-right: 0;
        margin-bottom: 0;
    }
    /***********/
    
    .cue {
        color: red;
        font-weight: 600;
        font-size: 18px;
        line-height: 50px;
    }
    /*** ***/
    
    .layui-anim.layui-anim-upbit {
        z-index: 1000;
    }
    
    .img-box {
        border: 1px solid #e8e8e8;
        border-radius: 5px;
        cursor: pointer;
        padding: 10px;
        width: 200px;
        float: left;
        margin-right: 10px;
        margin-bottom: 10px;
    }
    
    .img-box-img {
        margin-bottom: 10px;
    }
    
    .img-box-img img {
        width: 100%;
        height: 100%;
    }
    
    .layui-col-md4 {
        padding-bottom: 0;
    }
    
    div.tagsinput {
        padding: 0px 10px;
        border-color: #ddd;
    }
    
    div.tagsinput span.tag {
        margin-bottom: 0;
        padding: 2px 5px;
        font-size: 12px;
        margin-top: 5px;
    }
    
    div.tagsinput input {
        margin-bottom: 0;
        padding: 5px;
        font-size: 12px;
        margin-top: 5px;
    }
    
    .log-cnt {
        min-height: 40px;
    }
    
    #log-box tr {
        cursor: move;
    }
    
    .img-wrap video {
        width: 480px;
        height: 270px;
    }
    
    .editor {
        border-left: 1px solid #d2d6de;
        border-right: 1px solid #d2d6de;
        height: 700px;
        font-size: 100%;
        overflow-y: auto;
        font-family: Menlo, Monaco, Consolas, courier new, monospace;
    }
</style>
<form class="layui-form close-dialog" style="padding:20px;" onsubmit="return false;" action="/game/api_admin/edit_module" method="post">

    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
        <ul class="layui-tab-title">
            <li class="layui-this">模块基础</li>
            <li>模块参数</li>
            <li>模版配置</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div class="layui-form-item">
                    <label class="layui-form-label">模块名称：</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input" required lay-verify="required" name="name" value="{$info.name}" placeholder="请输入模块名称">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">模块索引：</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input" required lay-verify="required" name="key" value="{$info.key}" placeholder="请输入模块索引">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">模块图标：</label>
                    <div class="layui-input-block">
                        <input type="text" id="icon" name="icon" style="width:400px;display:inline-block" value="{$info.icon}" placeholder="" class="layui-input">
                        <a href="javascript:think_open('/game/admin/iconfont','设置图标',['674px','500px'],0);" id="seticon" class="layui-btn">设置图标</a>
                        <div class="img-wrap" id="icon-box" style="background:#f8f8f8;text-align:center;">
                            <if condition="$info['icon']"><i class="iconfont {$info.icon}"></i></if>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">是否显示：</label>
                    <div class="layui-input-inline">
                        <php>
                            $isshow = [1=>'显示',0=>'隐藏']; if($info['status'] == ''){ $info['status'] = 1; }
                        </php>
                        <foreach name="isshow" item="vo">
                            <input type="radio" name="status" value="{$key}" title="{$vo}" <if condition="$info['status'] eq $key">checked</if>>
                        </foreach>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">排序：</label>
                    <div class="layui-input-inline">
                        <input type="number" name="listorder" value="{$info.listorder|default=0}" required lay-verify="required|number" placeholder="请输入排序值" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>

            <div class="layui-tab-item">
                <div id="editor-javascript-code" style="display:none;">{$info.json}</div>
                <div id="editor-javascript" class="editor ace_editor ace-tm"></div>
            </div>

            <div class="layui-tab-item">
                <div id="editor-html-code" style="display:none;">{$info.tpl}</div>
                <div id="editor-html" class="editor ace_editor ace-tm"></div>
            </div>
        </div>
    </div>

    <div class="layui-form-item xy-bottom">
        <input type="hidden" name="id" id="id" value="{$_REQUEST['id']}">
        <button class="layui-btn" lay-submit="" lay-filter="submit">确定</button>
    </div>
</form>

<script src="/Public/ace/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
    layui.use(['element', 'jqueryui', 'form', 'laydate', 'laytpl'], function() {
        var form = layui.form,
            laydate = layui.laydate,
            transfer = layui.transfer,
            laytpl = layui.laytpl;

        form.on('submit(submit)', function(data) {
            var action = $(data.form).attr('action'),
                button = $(data.elem);
            var $form = $(data.form);
            if ($form.hasClass('submit-holder')) {
                return; //禁止提交，防止重复提交
            }
            data.field.json = editorJs.getValue();
            data.field.tpl = editorHtml.getValue();
            var ii;
            $.ajax({
                url: action,
                data: data.field,
                type: "POST",
                dataType: "json",
                beforeSend: function() {
                    $form.addClass('submit-holder'); //防止重复提交
                    ii = layer.msg('Loading...', {
                        icon: 16,
                        time: 10000
                    });
                },
                complete: function() {
                    layer.close(ii);
                    $form.removeClass('submit-holder'); //解除禁止提交
                },
                success: function(data) {
                    //data = JSON.parse(data);  //str 转 json
                    if (data.status == 1) {
                        layer.msg(data.info, {
                            icon: 1,
                            time: 1000
                        }, function() {
                            if (data.url) {
                                location.href = data.url;
                            }

                            //关闭父窗口
                            if ($form.hasClass('close-dialog')) {
                                //如果有callback样式，表示成功后要执行回调
                                if ($form.hasClass('callback')) {
                                    parent.mini_callback(data.data); //传一个参数进去
                                }
                                parent.think_close();
                            } else {
                                //执行本地回调方法
                                if ($form.hasClass('self-callback')) {
                                    self_callback(); //本地回调
                                }

                                if ($form.hasClass('callback')) {
                                    parent.mini_callback();
                                }

                                if ($form.hasClass('shuaxin')) {
                                    location.reload(); //刷新
                                }
                            }
                        });

                    } else {
                        layer.msg(data.info, {
                            icon: 2,
                            time: 1000
                        });
                    }
                    //需要跳转的话
                    if (data.url) {
                        setTimeout(function() {
                            location.href = data.url;
                        }, 1000);
                    }

                }
            });
            return false;
        });

        layui.use(['element', 'upload'], function() {
            layui.upload.render({
                url: '/api/upload/local?type=image',
                elem: '#fengmianupload',
                ext: 'jpg|png|gif|bmp|jpeg',
                method: 'post',
                before: function() {
                    ii = layer.msg('图片上传中...', {
                        icon: 16,
                        time: 10000
                    });
                },
                done: function(ret) {
                    if (ret.status) {
                        change_fengmian(ret.data.url);
                        layer.close(ii);
                    } else {
                        layer.alert(ret.info);
                    }
                }
            });

            layui.upload.render({
                url: '/api/upload/local?type=video',
                elem: '#videoupload',
                accept: 'video',
                method: 'post',
                before: function() {
                    ii = layer.msg('视频上传中...', {
                        icon: 16,
                        time: 15000
                    });
                },
                done: function(ret) {
                    if (ret.status) {
                        change_video(ret.data.url);
                        layer.close(ii);
                    } else {
                        layer.alert(ret.info);
                    }
                }
            });


            //监听封面图改变
            $('#fengmian').change(function() {
                change_fengmian($('#fengmian').val());
            });

            //监听视频更改
            $('#video').change(function() {
                change_video($('#video').val());
            });

            function change_fengmian(url) {
                $('#fengmian').val(url);
                $('#fengmian-box').html('<img src="' + url + '">');
                $('#fengmian-box').unbind('click').click(function() {
                    var $this = $(this);
                    //调用示例
                    layer.photos({
                        photos: '#fengmian-box',
                        anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
                    });
                });
            }

            function change_video(url) {
                $('#video').val(url);
                $('#video-box').html('<video poster="" playsinline="" autoplay="" loop="" muted=""><source src="' + url + '" type="video/mp4"></video>');
            }
        });

        // var mode = 'c_cpp';
        var themes = ['tomorrow_night', 'terminal', 'monokai', 'mono_industrial', 'dawn', 'chrome', 'github', 'kr_theme'];
        var editorHtml, editorStyle, editorJs;

        editorHtml = ace.edit("editor-html"); // 这里不需要加 #
        editorHtml.getSession().setMode("ace/mode/html");
        editorHtml.setTheme("ace/theme/" + themes[5]);
        editorHtml.setHighlightActiveLine(true);
        editorHtml.setShowPrintMargin(false);
        editorHtml.setValue($('#editor-html-code').html());
        editorHtml.setOptions({
            enableBasicAutocompletion: true, // the editor completes the statement when you hit Ctrl + Space
            enableLiveAutocompletion: true, // the editor completes the statement while you are typing
            enableSnippets: true,
            showPrintMargin: false, // hides the vertical limiting strip
            fixedWidthGutter: true,
            autoScrollEditorIntoView: true,
            copyWithEmptySelection: true,
            highlightActiveLine: false,
        });
        editorHtml.container.style.lineHeight = 1.2;

        editorJs = ace.edit("editor-javascript"); // 这里不需要加 #
        editorJs.getSession().setMode("ace/mode/json5");
        editorJs.setTheme("ace/theme/" + themes[5]);
        editorJs.setHighlightActiveLine(true);
        editorJs.setShowPrintMargin(false);
        editorJs.setValue($('#editor-javascript-code').html());
        editorJs.setOptions({
            enableBasicAutocompletion: true, // the editor completes the statement when you hit Ctrl + Space
            enableLiveAutocompletion: true, // the editor completes the statement while you are typing
            enableSnippets: true,
            showPrintMargin: false, // hides the vertical limiting strip
            fixedWidthGutter: true,
            autoScrollEditorIntoView: true,
            copyWithEmptySelection: true,
            highlightActiveLine: false,
        });
        editorJs.container.style.lineHeight = 1.2;
    });

    function setContent(content) {
        um.setContent(content);
    }

    //设置icon
    function callback(icon) {
        layui.use('jquery', function() {
            var $ = layui.jquery;
            $('#icon').val(icon);
            $('#icon-box').html('<i class="iconfont ' + icon + '"></i>');
        });
    }
</script>